<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>通知公告 - 农业服务平台</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../favicon.ico">
    <link rel="icon" type="image/png" href="../images/logo.png">
    
    <script src="../js/tailwindcss-3.4.17.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        'primary-dark': '#059669',
                        'primary-light': '#34d399',
                        secondary: '#06b6d4',
                        accent: '#f59e0b',
                        danger: '#ef4444',
                        success: '#10b981',
                        neutral: '#f9fafb',
                        'neutral-dark': '#f3f4f6',
                        'text-primary': '#1f2937',
                        'text-secondary': '#6b7280'
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif']
                    },
                    boxShadow: {
                        'soft': '0 2px 8px rgba(0, 0, 0, 0.04)',
                        'medium': '0 4px 12px rgba(0, 0, 0, 0.08)',
                        'large': '0 8px 24px rgba(0, 0, 0, 0.12)',
                        'xl': '0 12px 32px rgba(0, 0, 0, 0.16)'
                    }
                }
            }
        }
    </script>
    
    <link rel="stylesheet" href="../css/all.min.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body class="bg-gradient-to-br from-slate-50 via-gray-50 to-neutral">
    <div class="container-app shadow-2xl">
        <!-- 头部导航 -->
        <header class="glass-effect sticky top-0 z-10 border-b border-gray-100 shadow-soft">
            <div class="px-4 py-3 flex items-center gap-3">
                <button onclick="window.location.href='../index.html'" class="w-10 h-10 rounded-xl hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-arrow-left text-text-primary text-lg"></i>
                </button>
                <h1 class="text-base font-bold text-text-primary flex-1">通知公告</h1>
                <button class="w-10 h-10 rounded-xl hover:bg-gray-100 flex items-center justify-center transition-colors" onclick="CommonUtils.showToast('搜索功能开发中...', 'info')">
                    <i class="fa fa-search text-text-primary text-lg"></i>
                </button>
            </div>
        </header>
        
        <!-- 分类筛选 -->
        <div class="px-4 py-3 bg-white border-b border-gray-100">
            <div class="flex gap-2 overflow-x-auto no-scrollbar">
                <button class="filter-btn active px-4 py-1.5 rounded-full bg-primary text-white text-xs font-medium whitespace-nowrap" data-type="all">
                    全部
                </button>
                <button class="filter-btn px-4 py-1.5 rounded-full bg-gray-100 text-text-secondary text-xs font-medium whitespace-nowrap hover:bg-gray-200 transition-colors" data-type="policy">
                    政策通知
                </button>
                <button class="filter-btn px-4 py-1.5 rounded-full bg-gray-100 text-text-secondary text-xs font-medium whitespace-nowrap hover:bg-gray-200 transition-colors" data-type="activity">
                    活动福利
                </button>
                <button class="filter-btn px-4 py-1.5 rounded-full bg-gray-100 text-text-secondary text-xs font-medium whitespace-nowrap hover:bg-gray-200 transition-colors" data-type="system">
                    系统通知
                </button>
                <button class="filter-btn px-4 py-1.5 rounded-full bg-gray-100 text-text-secondary text-xs font-medium whitespace-nowrap hover:bg-gray-200 transition-colors" data-type="important">
                    重要公告
                </button>
            </div>
        </div>
        
        <!-- 公告列表 -->
        <main class="px-4 py-4 pb-20">
            <div class="space-y-3" id="announcement-list">
                <!-- 公告将通过JavaScript动态生成 -->
            </div>
        </main>

        <!-- 底部导航栏 -->
        <div id="bottom-nav"></div>
    </div>

    <script src="../js/common.js"></script>
    <script src="../js/navigation.js"></script>
    <script src="../js/components.js"></script>
    <script src="../js/animate.js"></script>
    <script>
        // 公告数据
        const announcements = [
            {
                id: 1,
                type: 'policy',
                title: '2024年农业补贴政策发布',
                content: '最新农业补贴政策已出台，符合条件的企业可申请相关补贴。政策包括种植补贴、农机购置补贴、绿色农业发展补贴等多个方面。',
                time: '今天 14:30',
                views: '1.2k',
                isNew: true
            },
            {
                id: 2,
                type: 'activity',
                title: '新用户注册福利活动',
                content: '新用户注册即送服务优惠券，价值200元，可用于平台内所有服务消费。活动时间有限，快来领取吧！',
                time: '昨天 10:15',
                views: '856',
                isNew: true
            },
            {
                id: 3,
                type: 'system',
                title: '平台系统升级通知',
                content: '为了给您提供更好的服务体验，平台将于本周六凌晨2:00-6:00进行系统升级维护，期间部分功能可能受影响。',
                time: '2天前',
                views: '2.3k',
                isNew: false
            },
            {
                id: 4,
                type: 'important',
                title: '农产品质量安全管理规定',
                content: '关于加强农产品质量安全管理的重要通知，所有服务商需严格遵守相关规定，确保农产品质量安全。',
                time: '3天前',
                views: '3.5k',
                isNew: false
            },
            {
                id: 5,
                type: 'policy',
                title: '农业技术培训补贴申请',
                content: '农业技术培训补贴开始申请，符合条件的农业从业者可获得最高5000元的培训补贴。',
                time: '5天前',
                views: '1.8k',
                isNew: false
            },
            {
                id: 6,
                type: 'activity',
                title: '春季农资采购优惠活动',
                content: '春季农资采购大促销，化肥、农药、种子等全场8折优惠，满额还有额外赠品。',
                time: '1周前',
                views: '4.2k',
                isNew: false
            },
            {
                id: 7,
                type: 'system',
                title: '服务评价功能上线',
                content: '平台新增服务评价功能，用户可以对接受的服务进行评价和打分，帮助其他用户选择优质服务。',
                time: '1周前',
                views: '1.5k',
                isNew: false
            },
            {
                id: 8,
                type: 'important',
                title: '防范农业诈骗警示',
                content: '近期发现有不法分子冒充平台工作人员进行诈骗，请广大用户提高警惕，切勿轻信陌生电话和信息。',
                time: '2周前',
                views: '5.6k',
                isNew: false
            }
        ];

        // 获取公告类型配置
        function getAnnouncementConfig(type) {
            const configs = {
                policy: {
                    borderColor: 'border-l-primary',
                    tagBgColor: 'bg-primary',
                    label: '政策'
                },
                activity: {
                    borderColor: 'border-l-accent',
                    tagBgColor: 'bg-accent',
                    label: '活动'
                },
                system: {
                    borderColor: 'border-l-secondary',
                    tagBgColor: 'bg-secondary',
                    label: '系统'
                },
                important: {
                    borderColor: 'border-l-purple-600',
                    tagBgColor: 'bg-purple-600',
                    label: '公告'
                }
            };
            return configs[type] || configs.system;
        }

        // 渲染公告列表
        function renderAnnouncements(filterType = 'all') {
            const container = document.getElementById('announcement-list');
            const filteredData = filterType === 'all' 
                ? announcements 
                : announcements.filter(item => item.type === filterType);
            
            if (filteredData.length === 0) {
                container.innerHTML = `
                    <div class="text-center py-20">
                        <i class="fa fa-inbox text-6xl text-gray-300 mb-4"></i>
                        <p class="text-text-secondary">暂无相关公告</p>
                    </div>
                `;
                return;
            }

            container.innerHTML = filteredData.map(item => {
                const config = getAnnouncementConfig(item.type);
                return `
                    <div class="bg-white rounded-2xl shadow-soft border-l-4 ${config.borderColor} border-t border-r border-b border-gray-100 hover:shadow-medium transition-all block overflow-hidden group cursor-pointer" onclick="navigateToDetail(${item.id})">
                        <div class="p-4">
                            <div class="flex items-start justify-between mb-2">
                                <h3 class="text-sm font-bold text-text-primary group-hover:text-primary transition-colors flex-1 pr-2">${item.title}</h3>
                                <div class="flex items-center gap-2 flex-shrink-0">
                                    ${item.isNew ? '<span class="text-xs px-2 py-1 bg-danger text-white rounded-full">NEW</span>' : ''}
                                    <span class="text-xs px-2 py-1 ${config.tagBgColor} text-white rounded-full">${config.label}</span>
                                </div>
                            </div>
                            <p class="text-xs text-text-secondary mb-2 line-clamp-2">${item.content}</p>
                            <div class="flex items-center gap-3 text-xs text-text-secondary">
                                <span><i class="fa fa-calendar-o mr-1"></i>${item.time}</span>
                                <span><i class="fa fa-eye mr-1"></i>${item.views}</span>
                            </div>
                        </div>
                    </div>
                `;
            }).join('');
        }

        // 跳转到详情页
        function navigateToDetail(id) {
            const announcement = announcements.find(item => item.id === id);
            if (announcement) {
                // 保存到localStorage
                localStorage.setItem('currentAnnouncement', JSON.stringify(announcement));
                window.location.href = './announcement-detail.html';
            }
        }

        // 筛选功能
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化组件
            Components.initComponents('');
            
            // 初始渲染
            renderAnnouncements();

            // 筛选按钮事件
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    // 更新按钮状态
                    document.querySelectorAll('.filter-btn').forEach(b => {
                        b.classList.remove('active', 'bg-primary', 'text-white');
                        b.classList.add('bg-gray-100', 'text-text-secondary');
                    });
                    this.classList.add('active', 'bg-primary', 'text-white');
                    this.classList.remove('bg-gray-100', 'text-text-secondary');

                    // 筛选数据
                    const type = this.dataset.type;
                    renderAnnouncements(type);
                });
            });

            // 初始化按钮反馈
            CommonUtils.initButtonFeedback();
        });
    </script>
</body>
</html>

